<template>
    <div class="user-table">
        <div class="comtent-box">
            <div class="head-operation">
                <div class="search-box">
                    <el-select
                        v-model="searchFrom.kw_ch"
                        class="select-w"
                        size="small"
                    >
                        <el-option
                            v-for="item in options"
                            :key="item.id"
                            :label="item.title"
                            :value="item.id"
                        >
                        </el-option>
                    </el-select>
                    <el-input
                        v-model="searchFrom.kw"
                        class="input-w"
                        size="small"
                        placeholder="请输入内容"
                    >
                        <i
                            slot="suffix"
                            class="el-input__icon el-icon-search"
                            @click="searchFun"
                        ></i
                    ></el-input>
                </div>
                <div class="but-operation">
                    <el-button
                        type="primary"
                        size="small"
                        @click="handleBlacklist({}, '2')"
                        >{{
                            activeName == 2 ? "移入" : "移出"
                        }}黑名单</el-button
                    >
                    <el-button type="primary" size="small" @click="refreshFun"
                        >刷新</el-button
                    >
                </div>
            </div>
        </div>
        <div class="table-box">
            <el-table
                :data="tableData"
                border
                style="width: 100%"
                v-infinite-scroll="loadFun"
                @selection-change="selectFun"
            >
                <el-table-column width="50" type="selection" align="center">
                </el-table-column>
                <el-table-column
                    prop="id_x"
                    label="用户编号"
                    width="200"
                    align="center"
                >
                </el-table-column>
                <el-table-column
                    label="用户头像"
                    width="150"
                    align="center"
                    v-if="checkListcol.indexOf('avatar') > -1"
                >
                    <template slot-scope="scope">
                        <div class="img-box">
                            <img
                                :src="
                                    scope.row.avatar
                                        ? scope.row.avatar
                                        : img_buf
                                "
                            />
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    v-for="item in col_ls"
                    :key="item.col"
                    :prop="item.col"
                    :label="item.title"
                    v-if="item.col != 'avatar'"
                    width="200"
                    align="center"
                >
                </el-table-column>
                <el-table-column
                    prop="address"
                    :fixed="tableData.length > 0 ? 'right' : false"
                    width="150"
                    align="center"
                >
                    <template slot="header" slot-scope="scope">
                        <div class="header-box">
                            <el-popover
                                placement="bottom"
                                width="200"
                                trigger="click"
                            >
                                <div class="content-box">
                                    <el-checkbox-group v-model="checkListcol">
                                        <div
                                            class="content-row"
                                            v-for="item in col_all"
                                            :key="item.col"
                                        >
                                            <el-checkbox :label="item.col">{{
                                                item.title
                                            }}</el-checkbox>
                                        </div>
                                    </el-checkbox-group>
                                </div>
                                <div style="text-align: right; margin: 0">
                                    <el-button
                                        type="primary"
                                        size="mini"
                                        @click="setcolFun"
                                        >确定</el-button
                                    >
                                </div>
                                <i class="el-icon-s-tools" slot="reference"></i>
                            </el-popover>
                            <span>操作</span>
                        </div>
                    </template>
                    <template slot-scope="scope">
                        <div class="but">
                            <el-button
                                size="mini"
                                @click="handleBlacklist(scope.row, '1')"
                                >{{
                                    activeName == 2 ? "移入" : "移出"
                                }}黑名单</el-button
                            >
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
import staticConst from "../../js/const/StaticConst.js";
import config from "@/js/conf/Config.js";

export default {
    props: [
        "options",
        "tableData",
        "searchFrom",
        "activeName",
        "col_all",
        "col_ls",
    ],
    components: {},
    computed: {},
    data() {
        return {
            img_buf: staticConst.GOOD_IMG,
            select_val_all: [],
            checkListcol: [],
        };
    },
    created() {},
    mounted() {},
    methods: {
        setcolFun() {
            const data = {
                ch: "col_user",
                hdongid: this.searchFrom.hdongid,
                cols: this.checkListcol,
            };
            this.$emit("setcolFun", data);
        },
        selectFun(val) {
            this.select_val_all = [];
            val.map((v) => {
                this.select_val_all.push(v.id);
            });
        },
        handleBlacklist(item, type) {
            if (this.select_val_all.length == 0 && type == 2) {
                this.$msg({ title: "请选择用户" });
                return;
            }
            this.$confirm(
                `是否将该用户${this.activeName == 2 ? "移入" : "移出"}黑名单`,
                "删除",
                {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                }
            )
                .then(async () => {
                    let url = config.HD_TOOL_SET_BKUSER;
                    let param = {
                        hudongid: this.searchFrom.hudongid,
                        customerid:
                            type == 1 ? item.id : this.select_val_all.join(),
                        act: this.activeName == 2 ? "add" : "del",
                    };
                    let res = await this.$api({ url: url, data: param });
                    if (!res) return;
                    if (res.status == 1) {
                        this.$msg({ title: res.msg });
                        this.$emit("handleBlacklist", item, this.activeName);
                    }
                })
                .catch(() => {});
        },
        refreshFun() {
            this.$emit("refreshFun");
        },
        loadFun() {
            this.$emit("loadFun");
        },
        searchFun() {
            this.$emit("searchFun");
        },
    },
};
</script>

<style lang="scss" scoped >
.user-table {
    .comtent-box {
        padding: 0 10px;
        .head-operation {
            height: 50px;
            background: #fff;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 10px;
            ::v-deep.search-box {
                width: 300px;
                display: flex;

                .select-w {
                    width: 90px;
                    .el-input__inner {
                        border-right: none;
                        border-radius: 4px 0 0 4px;
                        border-color: #c0c4cc !important;
                    }
                }
                .input-w {
                    width: 200px;
                    .el-input__inner {
                        border-radius: 0 4px 4px 0;
                        border-color: #c0c4cc !important;
                    }
                    i {
                        font-size: 18px;
                        color: #7f7f7f;
                        cursor: pointer;
                        font-weight: bold;
                    }
                }
            }
            .but-operation {
                width: calc(100% - 300px);
                text-align: right;
            }
        }
    }
    ::v-deep.table-box {
        position: relative;
        width: 100%;
        height: calc(100vh - 160px);
        .el-table {
            width: calc(100% - 18px) !important;
            height: 100%;
            padding-bottom: 20px;
            overflow-y: scroll;
            position: absolute;
            top: 0;
            left: 9px;
            &::before {
                height: 0;
            }
        }
        .header-box {
            i {
                vertical-align: text-bottom;
                font-size: 18px;
                margin-right: 5px;
                cursor: pointer;
            }
        }
        .el-table-column--selection {
            .cell {
                padding-right: 10px;
            }
        }
        .el-table__fixed-body-wrapper {
            top: 51px !important;
        }
        .but {
            margin-bottom: 10px;
            &:last-child {
                margin-bottom: 0;
            }
        }
        .img-box {
            width: 100%;
            height: 100%;
            text-align: center;
            img {
                width: 60px;
                height: 60px;
                border-radius: 50%;

                object-fit: cover;
            }
        }
    }
}
</style>
